<template>
    <div class="dashboard-container">
        <el-row :gutter="20">
            <el-col :span="24" style="margin-bottom: 20px;">
                <div class="grid-content">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix"><span>实时播报</span></div>
                        <el-table :data="realTimeBroadcastData" border style="width: 100%">
                            <el-table-column prop="createTime" label="时间"></el-table-column>
                            <el-table-column prop="temperature" label="温度(°C)"></el-table-column>
                            <el-table-column prop="humidity" label="相对湿度(%)"></el-table-column>
                            <el-table-column prop="gas" label="有害气体浓度"></el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix"><span>当日温度</span></div>
                        <div id="temperatureCharts" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12" style="margin-bottom: 20px;">
                <div class="grid-content">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix"><span>当日湿度</span></div>
                        <div id="humidityCharts" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="grid-content">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix"><span>实时播报</span></div>
                        <div id="harmfulGasCharts" style="width: 100%; height: 400px;"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: 'Dashboard',
        data() {
            return {
                temperatureCharts: null,
                temperatureData: [],
                humidityCharts: null,
                humidityData: [],
                harmfulGasCharts: null,
                harmfulGasData: [],
                realTimeBroadcastData: []
            };
        },
        methods: {
            selectLatestData() {
                this.$request({
                    url: '/api/sensor/selectLatestData',
                    method: 'get'
                }).then(res => {
                    try {
                        for (let data of res.data) {
                            if (data.gas === 1) {
                                data.gas = '正常';
                            } else {
                                data.gas = '超出正常范围'
                            }
                            this.realTimeBroadcastData.push(data)
                        }
                    } catch (e) {
                        console.log(JSON.stringify(e))
                    }
                })
            },
            selectChartData() {
                this.$request({
                    url: '/api/sensor/selectTodaySensorData',
                    method: 'get'
                }).then(res => {
                    try {
                        for (let data of res.data) {
                            this.temperatureData.push([new Date(data.createTime), data.temperature])
                            this.humidityData.push([new Date(data.createTime), data.humidity])
                            if (data.gas === 1) {
                                this.harmfulGasData.push([new Date(data.createTime), '正常'])
                            }else{
                                this.harmfulGasData.push([new Date(data.createTime), '超标'])
                            }
                        }
                    } catch (e) {
                        console.log(JSON.stringify(e))
                    }
                    let echarts = require('echarts');
                    this.temperatureCharts = echarts.init(document.getElementById('temperatureCharts'));
                    this.temperatureCharts.setOption({
                        title: {text: '24小时温度走向图'},
                        tooltip: {},
                        xAxis: {
                            type: 'time',
                            name: '时间'
                        },
                        yAxis: {
                            type: 'value',
                            name: '温度（°C）'
                        },
                        series: [
                            {
                                data: this.temperatureData,
                                type: 'line'
                            }
                        ]
                    });
                    this.humidityCharts = echarts.init(document.getElementById('humidityCharts'));
                    this.humidityCharts.setOption({
                        title: {text: '24小时相对湿度走向图'},
                        tooltip: {},
                        xAxis: {
                            type: 'time',
                            name: '时间'
                        },
                        yAxis: {
                            type: 'value',
                            name: '相对湿度（%）'
                        },
                        series: [
                            {
                                data: this.humidityData,
                                type: 'line'
                            }
                        ]
                    });
                    this.harmfulGasCharts = echarts.init(document.getElementById('harmfulGasCharts'));
                    this.harmfulGasCharts.setOption({
                        title: {text: '24小时有害气体超标散点图'},
                        tooltip: {},
                        xAxis: {
                            type: 'time',
                            name: '时间'
                        },
                        yAxis: {
                            type: 'category',
                            name: '状态',
                            data: ['正常', '超标']
                        },
                        series: [
                            {
                                data: this.harmfulGasData,
                                type: 'scatter'
                            }
                        ]
                    });
                })
            }
        },
        mounted() {
            this.selectLatestData();
            this.selectChartData();
        }
    };
</script>

<style lang="scss" scoped>
    .dashboard {
        &-container {
            margin: 30px;
        }

        &-text {
            font-size: 30px;
            line-height: 46px;
        }
    }
</style>
